<template>
  <div class="photoslist">
    <van-tabs v-model="active" animated>
      <van-tab v-for="val in ImgCategory" :key="val.id">
        <!-- 标题用插槽,直接用click id没法使用 -->
        <template #title>
          <span @click="getImages(val.id)">{{ val.title }}</span>
        </template>
      </van-tab>
    </van-tabs>
    <ul v-if="imgList.length !== 0">
      <li
        v-for="img in imgList"
        :key="img.id"
        @click="goDetail('/home/photoinfo', img.id)"
      >
        <img v-lazy="img.img_url" />
      </li>
    </ul>
    <div v-else class="noimg">暂无图片</div>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    ImgCategory: [],
    imgList: []
  }),
  methods: {
    async getiImgCategory() {
      const res = await this.$http.getiImgCategory()
      res.data.message.unshift({
        id: 0,
        title: '全部'
      })
      this.ImgCategory = res.data.message
    },
    async getImages(id) {
      const res = await this.$http.getImages(id)
      this.imgList = res.data.message
    }
  },
  created() {
    this.getiImgCategory()
    this.getImages(0)
  }
}
</script>
<style lang="scss" scoped>
.photoslist {
  .van-tabs {
    position: fixed;
  }
  ul {
    li {
      img {
        width: 100%;
      }
    }
  }
  .noimg {
    padding: 50px 20px;
  }
}
</style>
